<template>
    <div class="data-info">
        <div ref="container"></div>
    </div>

</template>

<script>
    import Chart from "@/components/g2/chart";

    export default {
        mounted() {
            const data = [
                {
                  "label": "汽车",
                  "type": "series1",
                  "value": 2800
                },
                {
                  "label": "汽车",
                  "type": "series2",
                  "value": 2200
                },
                {
                  "label": "医药",
                  "type": "series1",
                  "value": 2000
                },
                {
                  "label": "医药",
                  "type": "series2",
                  "value": 2600
                },
                {
                  "label": "生物",
                  "type": "series1",
                  "value": 1500
                },
                {
                  "label": "生物",
                  "type": "series2",
                  "value": 2000
                },
                {
                  "label": "航空",
                  "type": "series1",
                  "value": 1500
                },
                {
                  "label": "航空",
                  "type": "series2",
                  "value": 2000
                },
                {
                  "label": "教育",
                  "type": "series1",
                  "value": 1500
                },
                {
                  "label": "教育",
                  "type": "series2",
                  "value": 2000
                },
                {
                  "label": "科技",
                  "type": "series1",
                  "value": 1500
                },
                {
                  "label": "科技",
                  "type": "series2",
                  "value": 2000
                },
                {
                  "label": "房产",
                  "type": "series1",
                  "value": 1500
                },
                {
                  "label": "房产",
                  "type": "series2",
                  "value": 2000
                },
                {
                  "label": "媒体",
                  "type": "series1",
                  "value": 1500
                },
                {
                  "label": "媒体",
                  "type": "series2",
                  "value": 2000
                }
            ]
            // Step 1: 创建 Chart 对象
            const chart = new Chart({
                container: this.$refs['container'], // 指定图表容器 ID
                autoFit: true,
                height: 160,
                padding: [0, 20, 60, 50]
            });
            // Step 2: 载入数据源
            chart.data(data);
            chart.theme('antv');
            chart.axis('value', {
              position: 'right'
            });
            chart.axis('label', {
              label: {
                offset: 12
              }
            });
            chart.coord().transpose().scale(1, -1);
            // Step 3: 创建图形语法，绘制柱状图
            chart.interval().position('label*value').color('type').adjust([{
                type: 'dodge',
                marginRatio: 1 / 32
            }]);
            chart.render();
        }
    }
</script>
